<template>
  <div>
    <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%' }">
      <!-- 刷卡考勤隐藏输入框 -->
      <input type="text" id="idcards_input" v-model="idcard_input" />
      <!-- 条件搜索 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="学员姓名:">
                <a-input v-model="keywords" placeholder="请输入学员姓名/手机号(回车搜索)" @pressEnter="$refs.table.refresh(true)"
                  style="width: 80%">
                  <a-tooltip slot="suffix" title="请输入学员姓名/手机号">
                    <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="$refs.table.refresh(true)" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="学员年龄">
                <a-input v-model="age" placeholder="请输入学员年龄(回车搜索)" @pressEnter="$refs.table.refresh(true)"
                  style="width: 80%">
                  <a-tooltip slot="suffix" title="请输入学员年龄">
                    <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="$refs.table.refresh(true)" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="生日月份">
                <a-select v-model="queryParam.month" placeholder="请选择生日月份" style="width: 80%" allowClear>
                  <a-select-option v-for="(item, index) in monthList" :key="index" :value="item.id">{{
                    item.name
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="年级:">
                  <a-select v-model="queryParam.grade_id" placeholder="请选择年级" allowClear style="width: 80%">
                    <a-select-option v-for="(item, index) in gradeList" :key="index" :value="item.id">{{
                      item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="跟进人:">
                  <a-select v-model="queryParam.user_id" placeholder="请选择跟进人" allowClear style="width: 80%">
                    <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">{{
                      item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="学管师:">
                  <a-select v-model="queryParam.academic_supervisor" placeholder="请选择学管师" allowClear style="width: 80%">
                    <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">{{
                      item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <!-- <a-col :md="!advanced && 8 || 24" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
            >
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>-->
          </a-row>
        </a-form>
      </div>
      <a style="cursor: pointer" v-if="advanced" @click="more" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor: pointer" v-if="!advanced" @click="more" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a>
      <div class="table-operator" style="margin-bottom: 10px">
        <!-- <a-button
        type="primary"
        @click="showDraw"
        class="btn_margin"
        v-if="selectedRowKeys.length == 0"
      >添加学生</a-button>-->
        <router-link v-if="selectedRowKeys.length == 0" :to="{ name: 'student_sendMessage' }"
          key="/educationalCenter/studentExpand/sendMessage">
          <a-button type="primary" class="btn_margin">发消息</a-button>
        </router-link>
        <a-button @click="showUser(selectedRows)" :disabled="selectedRowKeys.length == 0"
          class="btn_margin">批量分配跟进人</a-button>
        <a-button @click="showManager(selectedRows)" da :disabled="selectedRowKeys.length == 0"
          class="btn_margin">批量分配学管师</a-button>
        <a-button class="btn_margin" v-if="selectedRowKeys.length == 0" @click="updateModal = true">导入学员</a-button>
        <a-button class="btn_margin" v-if="selectedRowKeys.length == 0" @click="exportStudent">导出</a-button>
      </div>
      <!-- <a-alert type="info" :message="description" style="margin: 10px 0 10px 0;" banner /> -->
      <a-alert type="success" v-if="selectedRowKeys.length > 0" style="margin: 0 0 10px 0">
        <span slot="message">
          已选择：{{ selectedRowKeys.length }}项
          <a style="color: #52c41a; margin-left: 20px" @click="selectedRowKeys = []">清空</a>
        </span>
      </a-alert>
      <s-table ref="table" rowKey="key" :columns="columns" :data="loadData"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" showPagination="auto"
        class="user_management_table" :pagination="pagination" :scroll="{ x: 1500 }">
        <!-- :scroll="{ x: 2000 }" -->
        <span slot="idcard_status" slot-scope="text, record" style="cursor: pointer">
          <span v-if="!record.card_num" @click="unBundling(record)">
            <a-icon type="idcard" style="color: rgb(191, 191, 191); font-size: 22px" />
          </span>
          <span v-else @click="unBundling(record)"><a-icon type="idcard"
              style="color: rgb(74, 183, 141); font-size: 22px" /></span>
        </span>
        <span slot="face_status" slot-scope="text, record" style="cursor: pointer">
          <span @click="goFace(record)">
            <span v-if="record.faces.length > 0">
              <span class="iconfont icon-renlianshibie" style="font-size: 22px; color: rgb(74, 183, 141)"></span>
            </span>
            <span v-else>
              <span class="iconfont icon-renlianshibie" style="font-size: 22px; color: rgb(191, 191, 191)"></span>
            </span>
          </span>
        </span>
        <span slot="phone" slot-scope="text, record">
          <span style="margin-right: 10px">{{ record.main_phone }}</span>
          <!-- <a title="已绑定微信" @click="sendMessage(record)"> @click="addIdCard(record)"
          <a-icon type="wechat" style="color:#52c41a" v-if="record.wechat_users_id" />
        </a>
        <a-icon type="wechat" v-if="!record.wechat_users_id" />-->
          <!-- <a-tooltip placement="rightTop">
          <template slot="title">
            <span v-if="record.wechat_users_id">已绑定微信</span>
            <span v-if="!record.wechat_users_id">未绑定微信</span>
          </template>
          <a-icon
            type="wechat"
            style="color:#52c41a"
            @click="sendMessage(record)"
            v-if="record.wechat_users_id"
          />
          <a-icon type="wechat" style="color:#ccc" v-if="!record.wechat_users_id" />
        </a-tooltip>-->
          <a-tooltip placement="rightTop">
            <template slot="title">
              <span v-if="record.is_wechat">已绑定微信</span>
              <span v-if="!record.is_wechat">未绑定微信</span>
            </template>
            <a-icon type="wechat" @click="sendMessage(record)" style="color: #52c41a" v-if="record.is_wechat" />
            <a-icon type="wechat" style="color: #ccc" v-if="!record.is_wechat" />
          </a-tooltip>
        </span>
        <span slot="name" slot-scope="text, record">
          <a @click="add(record)">{{ record.name }}</a>

          <a-icon type="man" v-if="record.sex == 1" style="color: rgb(71, 145, 237); margin-left: 5px" />
          <a-icon type="woman" v-if="record.sex == 2" style="color: rgb(251, 100, 101); margin-left: 5px" />
        </span>
      </s-table>
      <create-form ref="createModal" @ok="handleOk" />
      <a-drawer title="创建新学员" placement="right" @close="onClose" :width="520" :visible="showDrawer"
        :bodyStyle="{ paddingBottom: '80px' }" :confirmLoading="confirmLoading">
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="formsDrawer" :model="form" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol">
            <a-form-model-item label="基本信息" labelAlign="left" :colon="false" class="form_title"></a-form-model-item>
            <a-form-model-item label="学生姓名" prop="name">
              <a-input v-model="form.name" placeholder="请输入学生姓名" />
            </a-form-model-item>
            <a-form-model-item label="家长电话" prop="main_phone">
              <a-input-group compact>
                <a-select v-model="form.main_parent_type" style="width: 100px">
                  <a-select-option v-for="(item, index) in relation" :key="index" :value="item.id">{{
                    item.text
                    }}</a-select-option>
                </a-select>
                <a-input style="width: 160px" v-model="form.main_phone" placeholder="请输入联系电话" />
              </a-input-group>
            </a-form-model-item>
            <a-form-model-item label="性别">
              <a-radio-group v-model="form.sex">
                <a-radio :value="0">未知</a-radio>
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="出生日期">
              <a-date-picker @change="choiceAge" />
            </a-form-model-item>
            <a-form-model-item label="就读学校">
              <a-input placeholder v-model="form.school_name" />
            </a-form-model-item>
            <a-form-model-item label="意向课程">
              <a-select v-model="form.grade_id" placeholder="请选择意向课程" style="width: 200px; margin-right: 10px">
                <a-select-option v-for="(item, index) in gradeSelect" :key="index" :value="item.id"
                  v-if="item.is_enable == 1">{{ item.name }}</a-select-option>
              </a-select>
              <a @click="showChild('grades')">设置</a>
            </a-form-model-item>
            <a-form-model-item label="联系信息" labelAlign="left" :colon="false" class="form_title"></a-form-model-item>
            <a-form-model-item label="备用电话" prop="spare_phone">
              <a-input-group compact>
                <a-select v-model="form.spare_parent_type" style="width: 100px">
                  <a-select-option v-for="(item, index) in relation" :key="index" :value="item.id">{{
                    item.text
                    }}</a-select-option>
                </a-select>
                <a-input style="width: 160px" v-model="form.spare_phone" placeholder="请输入联系电话" />
              </a-input-group>
            </a-form-model-item>
            <a-form-model-item label="家庭住址">
              <a-input placeholder v-model="form.address" />
            </a-form-model-item>
            <a-form-model-item label="其他信息" labelAlign="left" :colon="false" class="form_title"></a-form-model-item>
            <a-form-model-item label="学员类型">
              <a-select v-model="form.type" placeholder="请选择" style="width: 200px; margin-right: 10px">
                <a-select-option v-for="(item, index) in studentTypeSelect" :key="index" :value="item.id">{{
                  item.name
                  }}</a-select-option>
              </a-select>
              <a>设置</a>
            </a-form-model-item>
            <a-form-model-item label="学生来源">
              <a-select v-model="form.source_id" placeholder="请选择学生来源" style="width: 200px; margin-right: 10px">
                <a-select-option v-for="(item, index) in sourceSelect" :key="index" :value="item.id"
                  v-if="item.is_enable == 1">{{ item.name }}</a-select-option>
              </a-select>
              <a @click="showChild('source')">设置</a>
            </a-form-model-item>
            <a-form-model-item label="跟进人">
              <a-select v-model="form.user_id" placeholder="请选择跟进人" style="width: 200px; margin-right: 10px">
                <a-select-option v-for="(item, index) in userSelect" :key="index" :value="item.id">{{
                  item.name
                  }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="学管师">
              <a-select v-model="form.academic_supervisor" placeholder="请选择学管师"
                style="width: 200px; margin-right: 10px">
                <a-select-option v-for="(item, index) in userSelect" :key="index" :value="item.id">{{
                  item.name
                  }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="标签">
              <a-select mode="multiple" v-model="form.label_ids" placeholder="请选择"
                style="width: 200px; margin-right: 10px">
                <a-select-option v-for="(item, index) in tagSelect" :key="index" :value="item.id">{{
                  item.content
                  }}</a-select-option>
              </a-select>
              <a @click="showChild('tags')">设置</a>
            </a-form-model-item>
            <a-form-model-item label="备注">
              <a-input v-model="form.remarks" placeholder="请输入(选填,最多输入100个字符)" :max-length="100" type="textarea" />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 12, offset: 7 }">
              <a-button type="primary" @click="submitForm('formsDrawer')">确定</a-button>
              <a-button style="margin-left: 10px">取消</a-button>
            </a-form-model-item>
          </a-form-model>
        </a-spin>
      </a-drawer>
      <grade-model ref="grades" @reload="reloadSelect"></grade-model>
      <sources-model ref="sources" @reload="reloadSelect"></sources-model>
      <tags-model ref="tags" @reload="reloadSelect"></tags-model>
      <user-modal ref="user" @reload="$refs.table.refresh()"></user-modal>
      <user-modal-manager ref="manager" @reload="$refs.table.refresh()"></user-modal-manager>
      <a-modal :visible="updateModal" :confirmLoading="updateLoading" title="导入学员" @ok="handleUpload"
        @cancel="updateModal = false">
        <div class="mb16 hd-box" style="display: flex">
          <div class="import-hd" :class="{ 'active-import-hd': index == showIndex, mr4: index == 0 }"
            v-for="(item, index) in importInfo" :key="index" @click="importHeadClick(index)">
            <div style="font-weight: 500; color: #333; margin-bottom: 4px">{{ item.title }}</div>
            <div style="font-size: 12px; color: #999">{{ item.des }}</div>
          </div>
        </div>
        <div class="updateInfo" style="margin-top: 10px" v-if="showIndex == 0">
          <div class="line">
            <div class="title">1.下载导入模板，按要求填写信息</div>
            <div>
              <a @click="downloadStudent">下载学员信息导入模板</a>
            </div>
          </div>
          <div class="line">
            <div class="title">2.选择需要导入的Excel文件</div>
            <div>
              <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
                <a-button type="primary" :disabled="fileList.length > 0">添加文件</a-button>
              </a-upload>
            </div>
          </div>
          <div class="line">
            <div class="title">3.添加备注</div>
            <div>
              <a-input placeholder="最多20字" style="width: 300px" v-model="excelInRemarks" />
              <p style="font-size: 10px; color: #ccc; padding: 0 2px">为导入的文件添加备注，便于在导入记录中查找</p>
            </div>
          </div>
        </div>
        <div v-if="showIndex == 1">
          <div class="mb16">
            <h4>1.选择导入类型</h4>
            <div class="tip-box">
              <div class="mb4">温馨提示：</div>
              <div style="font-size: 12px">
                • 导入合同前请先在系统中录入课程；每次导入前请根据合同类型下载最新的导入模板。
              </div>
            </div>
            <div>
              <a-radio-group v-model="moneyType">
                <a-radio :value="1"> 按课时收费合同 </a-radio>
                <a-radio :value="2"> 按天收费合同 </a-radio>
              </a-radio-group>
              <div style="margin-top: 8px" :class="{ 'second-type': moneyType == 2 }">
                <a @click="enrollDownload">下载导入模板</a>
              </div>
            </div>
          </div>
          <div class="mb16">
            <h4 class="mb4">2.选择需要导入的Excel文件</h4>
            <a-upload :file-list="fileList1" :remove="handleRemove1" :before-upload="beforeUpload1">
              <a-button type="primary" :disabled="fileList1.length > 0">添加文件</a-button>
            </a-upload>
          </div>
          <div class="mb16">
            <h4 class="mb4">3.添加备注</h4>
            <div class="mb4">
              <a-input style="width: 280px" placeholder="最多20字（选填）" v-model="excelInRemarks" />
            </div>
            <div class="color-grey">为导入的文件添加备注，便于在导入记录中查找</div>
          </div>
        </div>
      </a-modal>
      <!-- 解绑刷卡 -->
      <a-modal :title="IdcardInfo.card_num ? '解绑卡片' : '绑定卡片'" :visible="unbundlingVisible" :footer="null"
        @cancel="unbundlingVisible = false" width="400px">
        <!-- @click="oncad" -->
        <div v-if="!IdcardInfo.card_num" style="width: 100%; text-align: center" @click="oncad">
          <img src="~@/assets/img/bigcard.png" alt="" style="width: 50%" />
          <div>请刷卡</div>
        </div>
        <div v-else style="text-align: center">
          <span style="margin-right: 8px"><span style="margin-right: 5px">卡号:</span>{{ IdcardInfo.card_num }}</span>
          <a @click="jiebang">解绑</a>
        </div>
      </a-modal>
    </a-card>
    <div class="ant-card" style="margin-top: 30px;padding: 30px;">
      <h2>学生管理</h2>
      <div style="display: flex; justify-content: space-around;">
        <div class="echart">
          <h1>课程</h1>
          <div class="echart" id="lineDemo" ref="chart" style="width: 800px;height: 500px;"></div>
        </div>
        <div class="echart">
          <h1>学生</h1>
          <div class="echart" id="lineDemo1" ref="chart" style="width: 800px;height: 500px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import CreateForm from '../../list/modules/CreateForm'
import { getRoleList, getServiceList } from '@/api/manage'
import { _debounce } from '@/utils/domUtil'
import {
  studentList,
  studentCreate,
  excelIn,
  studentdownload,
  downloadClassHourImport,
  downloadClassDayImport,
  classHourImport,
  classDayImport,
  unbundling,
  addIdCard,
  studentExport
} from '@/api/student'
import { gradeList } from '@/api/grade'
import { sourceList } from '@/api/sources'
import gradeModel from '@/components/gradeManage'
import sourcesModel from '@/components/studentSource'
import { accountList } from '@/api/account'
import { tagList } from '@/api/tag'
import tagsModel from '@/components/tagsManage'
// import { deepClone } from '@/utils/pub_methods_base'
import userModal from '@/components/userModel/user'
import userModalManager from '@/components/userModel/manager'
// import { appCenterList } from '@/api/lives'
export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    CreateForm,
    gradeModel,
    sourcesModel,
    tagsModel,
    userModal,
    userModalManager
    // StepByStepModal
  },
  data() {
    return {
      title: '学生管理',
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '详情',
            type: 'pie',
            // 调整 radius 使扇区更窄
            radius: ['50%', '60%'], // 内半径 50%，外半径 55%
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1048,
                name: '学生',
                itemStyle: {
                  color: 'rgb(90,137,239)' // 设置填充颜色为红色
                }
              },
              {
                value: 735,
                name: '数量',
                itemStyle: {
                  color: 'rgb(25,212,174)' // 设置填充颜色为蓝色
                }
              }
            ]
          }
        ]
      },
      option1: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '详情',
            type: 'pie',
            // 调整 radius 使扇区更窄
            radius: ['50%', '60%'], // 内半径 50%，外半径 55%
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1048,
                name: '课程',
                itemStyle: {
                  color: 'rgb(90,137,239)' // 设置填充颜色为红色
                }
              },
              {
                value: 735,
                name: '数量',
                itemStyle: {
                  color: 'rgb(25,212,174)' // 设置填充颜色为蓝色
                }
              }
            ]
          }
        ]
      },
      unbundlingVisible: false,
      IdcardInfo: {
        card_num: null
      },
      idcard_input: '',
      importInfo: [
        {
          title: '导入学员基本信息',
          des: '可导入学员的姓名/性别/出生日期/年龄/就读学校/年级/家庭住址等基本信息'
        },
        {
          title: '导入学员报读信息',
          des: '可导入学员的购买课程/课时数/金额/时间等报读信息，导入后可进行分班排课'
        }
      ],
      showIndex: 0,
      moneyType: 1,
      fileList1: [],
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      description: '微信绑定数0，微信绑定率0.00%，超过0.00%的机构',
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      showDrawer: false,
      confirmLoading: false,
      schoolID: null,
      monthList: [
        {
          id: 1,
          name: '一月'
        },
        {
          id: 2,
          name: '二月'
        },
        {
          id: 3,
          name: '三月'
        },
        {
          id: 4,
          name: '四月'
        },
        {
          id: 5,
          name: '五月'
        },
        {
          id: 6,
          name: '六月'
        },
        {
          id: 7,
          name: '七月'
        },
        {
          id: 8,
          name: '八月'
        },
        {
          id: 9,
          name: '九月'
        },
        {
          id: 10,
          name: '十月'
        },
        {
          id: 11,
          name: '十一月'
        },
        {
          id: 12,
          name: '十二月'
        }
      ],
      // 查询参数
      keywords: '',
      age: '',
      queryParam: {
        school_id: this.$store.state.user.school,
        type: 1
      },
      userList: [],
      gradeList: [],
      pageNo: 1,
      pagination: {
        showTotal: (total) => `共${total}条数据`
      },
      // 表头
      columns: [
        {
          title: '学员姓名',
          dataIndex: 'name',
          width: 200,
          fixed: 'left',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '手机号',
          dataIndex: 'main_phone',
          width: 200,
          fixed: 'left',
          scopedSlots: { customRender: 'phone' }
        },
        // {
        //   title: '绑卡状态',
        //   scopedSlots: { customRender: 'idcard_status' },
        //   align: 'center',
        // },
        // {
        //   title: '人脸',
        //   dataIndex: 'face',
        //   align: 'center'
        // },
        // {
        //   title: '购买课时',
        //   dataIndex: 'description',
        //   align: 'center'
        // },
        // {
        //   title: '赠送课时',
        //   dataIndex: 'callNo',
        //   align: 'center'
        // },
        // {
        //   title: '已消耗课时',
        //   dataIndex: 'status',
        //   align: 'center'
        // },
        // {
        //   title: '课消金额',
        //   dataIndex: 'spendMoneyClass',
        //   align: 'center'
        // },
        // {
        //   title: '剩余课时',
        //   dataIndex: 'remainingClass',
        //   align: 'center'
        // },
        // {
        //   title: '缺课次数',
        //   dataIndex: 'updatedAt',
        //   align: 'center'
        // },
        {
          title: '年龄',
          dataIndex: 'age',
          customRender(text) {
            return text || '-'
          }
        },
        {
          title: '年级',
          dataIndex: 'grade_name',
          customRender(text) {
            return text || '-'
          }
        },
        {
          title: '学校',
          dataIndex: 'school_name',
          customRender(text) {
            return text || '-'
          }
        },
        {
          title: '跟进人',
          dataIndex: 'user_name',
          align: 'center',
          customRender(text) {
            return text || '-'
          }
        },
        {
          title: '学管师',
          dataIndex: 'academic_supervisor_name',
          align: 'center',
          customRender(text) {
            return text || '-'
          }
        }
        // {
        //   title: '操作',
        //   width: '150px',
        //   dataIndex: 'action',
        //   fixed: 'right',
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return studentList(Object.assign(parameter, this.queryParam, { keywords: this.keywords, age: this.age })).then(
          (res) => {
            this.pageNo = Number(parameter.pageNo)
            return res
          }
        )
      },
      selectedRowKeys: [],
      selectedRows: [],
      // custom table alert & rowSelection
      options: {
        alert: {
          show: true,
          clear: () => {
            this.selectedRowKeys = []
          }
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: false,
      // form表单下拉框
      gradeSelect: [], // 年级下拉
      sourceSelect: [], // 学生来源下拉
      userSelect: [], // 学管师  跟进人下拉
      tagSelect: [],
      studentTypeSelect: [
        {
          id: 1,
          name: '在读学员'
        },
        {
          id: 2,
          name: '历史学员'
        }
      ],
      // 添加学生
      form: {
        main_parent_type: 2,
        spare_parent_type: 3,
        type: 1,
        birthday: null,
        label_ids: []
      },
      relation: [
        { id: 0, text: '无' },
        { id: 1, text: '本人' },
        { id: 2, text: '妈妈' },
        { id: 3, text: '爸爸' },
        { id: 4, text: '爷爷' },
        { id: 5, text: '奶奶' },
        { id: 6, text: '外公' },
        { id: 7, text: '外婆' }
      ],
      rules: {
        name: [{ required: true, message: '请输入姓名' }],
        main_phone: [{ required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码！' }],
        spare_phone: [{ required: false, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码！' }]
      },

      // 导入
      updateModal: false, // 弹窗
      fileList: [],
      updateLoading: false,
      excelInRemarks: ''
    }
  },
  created() {
    const permission = this.$store.getters.roles.permissionList
    // eslint-disable-next-line eqeqeq
    if (permission.indexOf('cardClockIn') != -1) {
      this.columns.splice(2, 0, {
        title: '绑卡状态',
        scopedSlots: { customRender: 'idcard_status' },
        align: 'center'
      })
    }
    // eslint-disable-next-line eqeqeq
    if (permission.indexOf('faceList') != -1) {
      this.columns.splice(3, 0, {
        title: '人脸采集',
        scopedSlots: { customRender: 'face_status' },
        align: 'center'
      })
    }
    // appCenterList({ school_id: this.$store.state.user.school }).then((res) => {
    //   if (res.length > 0) {
    //     res.forEach((item) => {
    //       if (item.key == 'AttendFace') {
    //         this.columns.splice(3, 0, {
    //           title: '人脸采集',
    //           scopedSlots: { customRender: 'face_status' },
    //           align: 'center',
    //         })
    //       }
    //     })
    //   }
    // })
  },
  mounted() {
    // 获取图表容器
    const chartDom1 = document.getElementById('lineDemo1');

    // 初始化 ECharts 实例
    const myChart1 = this.$echarts.init(chartDom1);

    // 清除图表上的现有内容（如果有的话）
    myChart1.clear();

    // 设置图表配置项和数据
    myChart1.setOption(this.option)
    const chartDom = document.getElementById('lineDemo')
    const myChart = this.$echarts.init(chartDom)
    myChart.clear()
    myChart.setOption(this.option1)
    const queryValue = this.$route.query.searchValue
    console.log(queryValue, '搜索框传值')
    this.schoolID = this.$store.state.user.school
    this.reloadSelect()
    accountList({ school_id: this.queryParam.school_id, pageSize: 999999 })
      .then((res) => {
        this.userList = res.data
      })
      .catch((error) => {
        this.$message.error(err.data.message || '获取跟进人列表失败，请稍后重试')
      })
    gradeList({ school_id: this.queryParam.school_id, pageSize: 999999 })
      .then((res) => {
        this.gradeList = res.data
      })
      .catch((error) => {
        this.$message.error(err.data.message || '获取年级列表失败，请稍后重试')
      })
  },
  watch: {
    showDrawer(val) {
      if (val == true) {
        // 调接口
        this.reloadSelect()
      } else {
        // 清空form
        this.form = {
          main_parent_type: 2,
          spare_parent_type: 3,
          type: 1,
          birthday: null,
          label_ids: []
        }
      }
    },
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh()
      },
      // immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true // 开启深度监听，默认是false
    },
    idcard_input(newValue, oldValue) {
      document.querySelector('#idcards_input').focus()
      if (newValue != '') {
        this.cardTj1()
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    // 获取查询参数
    const searchValue = to.query.searchValue
    console.log(searchValue) // 打印传入的值
    next(vm => {
      // 在组件实例被创建之后调用 refresh 方法，并传入 searchValue
      vm.$nextTick(() => {
        if (vm.$refs && vm.$refs.table) {
          vm.$refs.table.refresh(true)
        }
      })
    });
  },
  methods: {
    handleButtonClick(e) {
      console.log('click', e)
    },
    handleMenuClick(e) {
      console.log('click', e)
    },
    // 到出
    exportStudent() {
      studentExport(Object.assign(this.queryParam, { keywords: this.keywords, age: this.age })).then(res => {
        window.location.href = res.url.url + res.url.path
        this.$message.success('导出成功')
      }).catch((err) => {
        this.$message.error(err.data.message || '导出失败')
      })
    },
    goFace(data) {
      const routeData = this.$router.resolve({
        name: 'faceClockIn',
        query: { student_id: data.id, student_name: data.name }
      })
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
      window.open(routeData.href, '_blank')
    },
    cardTj1: _debounce(function () {
      this.addSubmit()
    }, 100),
    addSubmit() {
      addIdCard(this.IdcardInfo.id, { card_num: this.idcard_input })
        .then((res) => {
          this.idcard_input = ''
          this.unbundlingVisible = false
          this.$refs.table.refresh(true)
          this.$message.success('添加卡号成功')
        })
        .catch((err) => {
          this.idcard_input = ''
          this.$message.error(err.data.message || '刷卡失败，请刷新后重试')
        })
    },
    oncad() {
      document.querySelector('#idcards_input').focus()
    },
    unBundling(data) {
      this.IdcardInfo = data
      this.unbundlingVisible = true
      setTimeout(() => {
        document.querySelector('#idcards_input').focus()
      }, 500)
    },
    jiebang() {
      unbundling(this.IdcardInfo.id)
        .then((res) => {
          this.$message.success('解绑成功')
          this.unbundlingVisible = false
          this.$refs.table.refresh(true)
        })
        .catch((err) => {
          this.$message.error(err.data.message || '解绑失败,请稍后再试')
        })
    },
    beforeUpload1(file) {
      this.fileList1 = [file]
      const extension = file.name.split('.')[1] === 'xls'

      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        this.fileList1 = []
        return false
      }
      if (!isLt5M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        this.fileList1 = []
        return false
      }
      return false
    },
    handleRemove1(file) {
      const index = this.fileList1.indexOf(file)
      const newFileList = this.fileList1.slice()

      newFileList.splice(index, 1)
      this.fileList1 = newFileList
    },
    enrollDownload() {
      if (this.moneyType == 1) {
        downloadClassHourImport({ school_id: this.$store.state.user.school })
          .then((res) => {
            if (res) {
              let url = ''
              url = res.url.url + res.url.path
              window.location.href = url
            }
          })
          .catch((err) => {
            this.$message.error(err.data.message || '下载导入失败')
          })
      }
      if (this.moneyType == 2) {
        downloadClassDayImport({ school_id: this.$store.state.user.school })
          .then((res) => {
            if (res) {
              let url = ''
              url = res.url.url + res.url.path
              window.location.href = url
            }
          })
          .catch((err) => {
            this.$message.error(err.data.message || '下载导入失败')
          })
      }
    },
    // 导入学员信息
    importHeadClick(index) {
      this.showIndex = index
    },
    // 微信绑定数
    getDescription() { },
    showUser(data) {
      const arr = []
      data.forEach((val) => {
        arr.push(val.id)
      })
      this.$refs.user.showModal(arr)
    },
    showManager(data) {
      const arr = []
      data.forEach((val) => {
        arr.push(val.id)
      })
      this.$refs.manager.showModal(arr)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          const a = JSON.stringify(this.form)
          const params = JSON.parse(a)
          params.school_id = this.schoolID
          studentCreate(params)
            .then((res) => {
              this.$message.success('添加成功')
              this.confirmLoading = false
              this.form = {
                main_parent_type: 2,
                birthday: null,
                spare_parent_type: 3,
                type: 1,
                label_ids: []
              }
              this.showDrawer = false
              this.$refs.table.refresh()
            })
            .catch((err) => {
              this.confirmLoading = false
              this.$message.error(err.data.message || '添加失败')
            })
        } else {
          return false
        }
      })
    },
    showDraw() {
      this.showDrawer = !this.showDrawer
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    onClose() {
      this.showDrawer = !this.showDrawer
    },
    showChild(e) {
      if (e == 'grades') {
        this.$refs.grades.showModal()
      } else if (e == 'source') {
        this.$refs.sources.showModal()
      } else if (e == 'tags') {
        this.$refs.tags.showModal()
      }
    },
    reloadSelect() {
      gradeList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.gradeSelect = res.data
      })
      sourceList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.sourceSelect = res.data
      })
      accountList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.userSelect = res.data
      })
      tagList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.tagSelect = res.data
      })
    },
    choiceAge(d, ymd) {
      this.form.birthday = ymd
    },
    sendMessage(data) {
      this.$router.push({ name: 'student_sendMessage', query: { id: data.id, name: data.name } })
    },
    beforeUpload(file) {
      this.fileList = [file]
      const extension = file.name.split('.')[1] === 'xls'

      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        this.fileList = []
        return false
      }
      if (!isLt5M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        this.fileList = []
        return false
      }
      return false
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()

      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    handleUpload() {
      if (this.showIndex == 0) {
        if (this.fileList.length < 1) {
          this.$message.error('请选择上传文件')
        }
        this.updateLoading = true
        const that = this
        const formData = new FormData()
        formData.append('excel', that.fileList[0])
        formData.append('school_id', this.$store.state.user.school)
        formData.append('remark', this.excelInRemarks)
        excelIn(formData)
          .then((res) => {
            this.updateLoading = false
            this.updateModal = false
            this.$refs.table.refresh()
            this.$message.success('导入成功')
            this.fileList = []
          })
          .catch((err) => {
            this.updateLoading = false
            this.$message.error(err.data.message || '导入失败')
          })
      } else {
        if (this.fileList1.length < 1) {
          this.$message.error('请选择上传文件')
          return
        }
        const that = this
        const formData = new FormData()
        formData.append('excel', that.fileList1[0])
        formData.append('school_id', this.$store.state.user.school)
        formData.append('remark', this.excelInRemarks)
        // 按课时导入
        if (this.moneyType == 1) {
          classHourImport(formData)
            .then((res) => {
              this.updateLoading = false
              this.updateModal = false
              this.$refs.table.refresh()
              this.$message.success('导入成功')
            })
            .catch((err) => {
              this.updateLoading = false
              this.$message.error(err.data.message || '导入失败')
            })
        }
        // 按天导入
        if (this.moneyType == 2) {
          classDayImport(formData)
            .then((res) => {
              this.updateLoading = false
              this.updateModal = false
              this.$refs.table.refresh()
              this.$message.success('导入成功')
            })
            .catch((err) => {
              this.updateLoading = false
              this.$message.error(err.data.message || '导入失败')
            })
        }
      }
    },
    more() {
      this.advanced = !this.advanced
    },
    download(blobUrl, name) {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.download = name
      a.href = blobUrl
      a.click()
      document.body.removeChild(a)
    },
    downloadStudent() {
      studentdownload({ school_id: this.$store.state.user.school })
        .then((res) => {
          if (res) {
            let url = ''
            url = res.url.url + res.url.path
            window.location.href = url
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '下载导入失败')
        })
    },
    add(data) {
      // let sessionPageNo = JSON.parse(sessionStorage.getItem('sessionPageNo'))
      // if(sessionPageNo){
      //   sessionPageNo.StudentPageNo=this.pageNo
      //   sessionStorage.setItem("sessionPageNo",JSON.stringify(sessionPageNo))
      // }
      // else{
      sessionStorage.setItem('sessionPageNo', JSON.stringify({ StudentPageNo: this.pageNo }))
      // }

      this.$router.push({ name: 'student_Info', query: { id: data.id } })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/img/customFormIcon/iconfont.css';

.expand_warning {
  margin-top: 16px;
  background-color: #fff0e7;
  border-radius: 4px;
}

.btn_margin {
  margin-right: 10px;
}

.updateInfo {
  .line {
    margin-bottom: 16px;

    .title {
      margin-bottom: 3px;
    }
  }
}

.form_title {
  div {
    label {
      font-size: 16px !important;
    }
  }
}

#moreButton {
  position: absolute;
  top: 48px;
  right: 20px;
}

.import-hd {
  display: inline-block;
  width: 100%;
  height: 74px;
  padding: 4px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  cursor: pointer;
}

.active-import-hd {
  border: 1px solid #fc9c6b;
  background: hsla(20, 96%, 70%, 0.05);
}

.mr4 {
  margin-right: 4px;
}

.second-type {
  margin-left: 140px;
}

.mb4 {
  margin-bottom: 4px;
}

.mr8 {
  margin-right: 8px;
}

.mb8 {
  margin-bottom: 8px;
}

.mt12 {
  margin-top: 12px;
}

.mb16 {
  margin-bottom: 16px;
}

#idcards_input {
  position: relative;
  top: -100000000px;
}
</style>
